<template>
	<div class="add-jq-dialog">
		<!--添加仓库-->
		
		
		<appdialog 
			ref="dialog"
			:visible="false" 
			title="添加仓库"
			width="50%"
			@confirm="confirmAdd"
			@cancle="cancleAdd"
			>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="转发名称：" prop="name">
            <el-input v-model="ruleForm.name" style="width:160px" placeholder="请选输入名称"></el-input>
          </el-form-item>
          <el-form-item label="是否启用：" prop="status">
            <el-switch v-model="ruleForm.status" active-text="是" inactive-text="否">
            </el-switch>
          </el-form-item>
          <el-form-item label="协议：" prop="protocol">
            <el-select v-model="ruleForm.protocol" placeholder="请选择协议">
              <el-option :label="item.label" :value="item.value" v-for="item in xieyiList" :key="item.index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请求规则：" prop="balance">
            <el-select v-model="ruleForm.balance" placeholder="请选择规则">
             <el-option :label="item.label" :value="item.value" v-for="item in guizeLlist" :key="item.index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="代理端口：" prop="port">
            <el-input v-model="ruleForm.port" style="width:100px" placeholder="请选输入端口" maxlength="4"></el-input>
          </el-form-item>
          <el-form-item label="关联应用：" prop="aaaaa">
            <el-select v-model="tmp"
                      filterable
                      remote
                      reserve-keyword
                      placeholder="请选择模板"
                      :remote-method="remoteMethod"
                      @change="handleChoosetmp"
                      :loading="loading">
                <el-option :label="item.name" :value="item.templateId" v-for="item in tmpList" :key="item.index"></el-option>
            </el-select>
            <el-select  placeholder="请选择" v-model="inst" v-if="shiliList.length">
             <el-option :label="item.instName" :value="item" v-for="item in shiliList" :key="item.index" value-key="'value'">
             </el-option>
            </el-select>
            <span v-if="ishow">所选模板无实例</span>
          </el-form-item>
          <el-form-item>
            <el-tag type="info" v-if="inst">
              <span>应用名：{{inst.appName}}</span>——
              <span>类型：{{inst.appType}}</span>——
              <span>实例ID：{{inst.instId}}</span>——
              <span>版本：{{inst.appVersion}}</span>
            </el-tag>
          </el-form-item>
          <el-form-item label="转发配置：" prop="detailsInfo">
            <el-table :data="ruleForm.detailsInfo" style="width: 100%">
                    <el-table-column label="应用IP">
                        <template slot-scope="scope">
                           <el-input v-model="scope.row.host" size="small"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="应用端口" >
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.port" size="small"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="最大连接数" >
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.maxConnect" size="small"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="caozuo" width="120" label="操作">
                        <template slot-scope="scope">
                          <el-button @click="handleDelete(scope.$index)">删除
                          </el-button>
                        </template>
                    </el-table-column>
              </el-table>
              <el-button type="text" @click="handleAdd">新增一行</el-button>
          </el-form-item>
      </el-form>
		</appdialog>
		
		
		
	</div>
</template>

<script>

import appdialog from "@/view/components/dialog/dialog";
import {getAcDictByTypeName} from "@/service/swagger/AcDictController";
import {getTmpByPage} from "@/service/swagger/AcTemplateController"
import {getAppInstList} from "@/service/swagger/AcAppInstController"
import { forward } from "@/service/swagger/HaproxyController";

export default {
	name: "addJQDialog",
	components: {
		appdialog,
  },
  props:["ruleForm"],
	data() {
    return {
      rules: {
				name: [{ required: true, message: '请输入名称！', trigger: 'blur' }],
				port: [{ required: true, message: '请输入端口！', trigger: 'blur'}],
				balance: [{ required: true, message: '请输选择调度算法！', trigger: 'blur' }],
				protocol: [{ required: true, message: '请选择协议！', trigger: 'blur' }]
      },
      loading:false,
      xieyiList:[],
      guizeLlist:[],
      tmpList:[],
      shiliList:[],
      tableData:[],
      tmp:'',
      inst:null,
      ishow:false,
    }
  },
  mounted() {
  },
	methods:{
   	open(){
      this.$refs.dialog.open();
      this.initSelectData()
       
    },
    initSelectData(){
      //初始化下拉框所有数据  //协议
      getAcDictByTypeName({typeName : "protocol_type"}).then(ret=>{
        this.xieyiList = ret.data.map(el=>{
          return {label : el.name,value : el.value}
        })
      })
      //规则
      getAcDictByTypeName({typeName : "balance_type"}).then(ret=>{
        this.guizeLlist = ret.data.map(el=>{
          return {label : el.name,value : el.value,}
        })
      })
      // 应用模板
      getTmpByPage({}).then(ret=>{
        if(ret&&ret.code == 0){
           this.tmpList = ret.data.data
        }
      })
    },
     // 远程搜索  模板
    remoteMethod(query){
      if (query !== '') {
          this.loading = true;
            setTimeout(() => {
              this.loading = false
              getTmpByPage({name:query}).then(ret=>{
                if(ret&&ret.code == 0){
                  this.tmpList = ret.data.data
                }
              })
          }, 200)
      }
    },
    //选择模板查实例
    handleChoosetmp(val){
      this.shiliList = []
      this.inst = null;
      getAppInstList({templateId:val}).then(ret=>{
        if(ret&&ret.code == 0){
          if(ret.data.data.length){
            this.ishow = false
          }else{
            this.ishow = true
          }
          this.shiliList = ret.data.data
        }
      })
    },
    handleAdd(){ //新增
       this.ruleForm.detailsInfo.push({host:'',prot:'',maxConnect:''})
    },
    handleDelete(idx){ //删除
        this.ruleForm.detailsInfo.splice(idx,1)
    },
   	confirmAdd(){
       // 验证表单
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					// 验证通过
					this.submitAdd();
				} else {
					setTimeout(() => {
						this.open();
					}, 50)
					return false;
				}
			});
   	},
   	submitAdd(){
       if(this.ruleForm.status){
         this.ruleForm.status = 0
       }else{
         this.ruleForm.status = 1
       }
      forward({ ...this.ruleForm }).then(ret => {
				if (ret&&ret.code == 0) {
					this.$message({	message: '操作成功',	type: 'success',	duration: 2000	});
					this.$refs.dialog.close();
					this.$emit("addSucess")
				} else {
					setTimeout(() => {
						this.open();
					}, 50)
					return false;
				}
			})
   	},
   	cancleAdd(){
   	},
	}
}
</script>

<style scoped lang="scss">
/* @import "../../../styles/variables.scss"; */


</style>